/*组织机构管理,作者:高振中,日期:2020-11-15 21:33:20*/
<template>
  <div>
    <el-row>
      <el-button type="text" size="mini" @click="() => queryList({ id: 0, children: 'A' })">根结点列表</el-button>
      <el-button type="text" size="mini" @click="() => doAdd(0)">添加根结点</el-button>
    </el-row>
    <el-row>
      <el-col :span="5">
        <el-tree default-expand-all :data="treeList" :props="{ children: 'children', label: 'name' }">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            <span>
              <el-button type="text" size="mini" @click.stop="() => queryList(data)">结点列表</el-button>
              <el-button type="text" size="mini" @click.stop="() => doAdd(data.id)">添加下级</el-button>
              <el-button type="text" size="mini" @click.stop="() => doEdit(data)">编辑</el-button>
              <el-button type="text" size="mini" @click.stop="() => doDelete(data)">删除</el-button>
            </span>
          </span>
        </el-tree>
      </el-col>
      <el-col :span="19">
        <el-table :data="dataList" v-loading="loading" element-loading-text="正在加载......" border size="mini" :row-style="iRowStyle" :cell-style="iCellStyle" :header-row-style="iHeaderRowStyle" :header-cell-style="iHeaderCellStyle">
          <el-table-column prop="name" label="机构名称"></el-table-column>
          <el-table-column prop="type" label="机构类型" :formatter="deptTypeFormat"></el-table-column>
          <el-table-column prop="code" label="机构编码"></el-table-column>
          <el-table-column prop="status" label="状态" :formatter="statusFormat"></el-table-column>
          <el-table-column prop="orderNum" label="排序编号"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" :formatter="dateFormat"></el-table-column>
          <el-table-column prop="updateTime" label="更新时间" :formatter="dateFormat"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <DeptDialog ref="dialog" :queryTree="queryTree"></DeptDialog>
  </div>
</template>
<script>
import DeptDialog from "./DeptDialog.vue";
import { treeMix } from "@/common/tree";
import { statusFormat, deptTypeFormat, dateFormat } from "@/common/dicts";
export default {
  mixins: [treeMix],
  components: { DeptDialog },
  data() {
    return {};
  },
  name: "Dept",
  methods: {
    deptTypeFormat,
    statusFormat,
    dateFormat,
    /**组织机构-树*/
    queryTree() { this.rq.post("/dept/tree").then((res) => { if (res.code == 200) this.treeList = res.data; }); },
    /**组织机构-树*/
    queryList(data) {
      this.loading = true;
      if (data.children) {
        let param = { parentId: data.funcId };
        this.rq.post("/dept/list", param).then((res) => { if (res.code == 200) this.dataList = res.data; else this.$message.error(res.msg); });
      } else this.dataList = [];
      this.loading = false;
    },
    /**组织机构-树*/
    doDelete(row) {
      this.$confirm("你确定要删除吗?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => {
        this.rq.post("/dept/delete", [row.id]).then((res) => {
          if (res.code == 200) { this.$message.success("删除成功"); this.queryTree(); } else this.$message.error(res.msg);
        });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.custom-tree-node { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px; }
 </style>